<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background: yellow;
				
				/* 边框*/
				/* solid/dotted/dashed/double */
				/* border: 5px double blue; */
				
				/* border-style: solid dotted; */
				/* border-width: 5px 10px; */
				/* border-color: blue green;*/
				border-width: 10px;
				border-style: double solid dashed solid;
				border-color: red blue;
			}
			
			
		</style>
	</head>
	
	<body>
		<!-- 
			1 边框：就是围绕在标签宽度与高度周围的线条
			1 边框格式
				2-1连写(同时设置四条边的边框)
				border: 边框的宽度 边框的样式 边框的颜色;
				border: 1px solid #000;
				边框的样式：solid/dotted/dashed/double
				
				2-2连写(分别设置四条边的边框)
				border-top: 边框的宽度 边框的样式 边框的颜色;
				border-right: 边框的宽度 边框的样式 边框的颜色;
				border-bottom: 边框的宽度 边框的样式 边框的颜色;
				border-left: 边框的宽度 边框的样式 边框的颜色;
				
				2-3连写(分别设置四条边的边框)
				border-width: 上 右 下 左;
				border-style: 上 右 下 左;
				border-color: 上 右 下 左;
				
				注意点:
				这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
				这三个属性的取值省略时的规律
				上 右 下 > 左边的取值和右边的一样
				上 右 >下边的取值和上边一样 左边的取值和右边的一样
				上 > 右下左边取值和上边一样
				
				2-4非连写(方向+要素)
				border-left-width: 20px;
				border-left-style: double;
				border-left-color: pink;
		 -->
		<div class="box">
			
		</div>
	</body>
</html>
